<script>
export default {
  name: "LoadingCom"
}
</script>

<template>
  <ul class="loading-ul">
    <li>l</li>
    <li>o</li>
    <li>a</li>
    <li>d</li>
    <li>i</li>
    <li>n</li>
    <li>g</li>
    <li>.</li>
    <li>.</li>
    <li>.</li>
  </ul>
</template>

<style scoped>
  .loading-ul{
    display: flex;
    list-style: none;
    font-size: 20px;
  }
  .loading-ul li{
    margin: 2px;
    animation: ani 6s infinite linear;
    opacity: .6;
  }
  .loading-ul li:nth-child(1){
    animation-delay: .4s;
  }
  .loading-ul li:nth-child(2){
    animation-delay: .8s;
  }
  .loading-ul li:nth-child(3){
    animation-delay: 1.2s;
  }
  .loading-ul li:nth-child(4){
    animation-delay: 1.6s;
  }
  .loading-ul li:nth-child(5){
    animation-delay: 2s;
  }
  .loading-ul li:nth-child(6){
    animation-delay: 2.4s;
  }
  .loading-ul li:nth-child(7){
    animation-delay: 2.8s;
  }
  .loading-ul li:nth-child(7){
    animation-delay: 3.2s;
  }
  .loading-ul li:nth-child(7){
    animation-delay: 3.6s;
  }
  .loading-ul li:nth-child(7){
    animation-delay: 4s;
  }
  @keyframes ani {
    0%{
      opacity: .6;
    }
    50%{
      opacity: 0;
      transform: rotateY(5deg);
    }
    100%{
      opacity: .6;
    }

  }
</style>